<!--
 * @Date: 2023-03-10 20:57:19
 * @LastEditTime: 2023-03-10 21:43:46
 * @FilePath: /hash-guess-game/src/views/shareCardList/shareCardList.vue
 * 介绍:分享卡操作记录
-->
<script lang="ts" setup>
import { apiShareCardLogs, ShareCardLogs } from "@@/api/module/hashRaceCourse";
import CardGlass from "@@/components/CardGlass/CardGlass.vue";
import dayjs from "dayjs";
import { formatNumber, _require } from "@@/utils/tools/tools";
import Tag, { TagEmun } from "@@/components/Tag";
import PagingList from "@@/components/PagingList/PagingList.vue";
const { t } = useI18n();

const statusEmun: TagEmun = reactive([
  {
    text: t("que-ren-zhon"),
    value: 0,
    style: {
      backgroundColor: "#3498db",
    },
  },
  {
    text: t("cheng-gong"),
    value: 1,
    style: {
      backgroundColor: "#2ed573",
    },
  },
  {
    text: t("shi-bai"),
    value: 2,
    style: {
      backgroundColor: "#e84118",
    },
  },
]);
</script>

<template>
  <div class="meGameList">
    <h4>{{ $t("fen-xiang-ka-cao-zuo-ji-lu") }}</h4>
    <CardGlass>
      <PagingList ref="PagingListRef" :api="apiShareCardLogs" sticky="sticky">
        <template #header>
          <div class="list_title list-layout">
            <h4>{{ $t("shi-jian") }}</h4>
            <h4>{{ $t("zhuang-tai") }}</h4>
            <h4>{{ $t("shu-liang") }}</h4>
          </div>
        </template>
        <template #item="{ item }: { item: ShareCardLogs.ResItem }">
          <div
            style="align-items: baseline"
            class="List_item auto-mt-md list-layout T-S-sm"
          >
            <div>{{ dayjs(item.created_at).format("MM-DD HH:mm:ss") }}</div>
            <Tag :value="item.status" :enum="statusEmun"></Tag>
            <Tag>{{ formatNumber(item.number) }}</Tag>
          </div>
        </template>
      </PagingList>
    </CardGlass>
  </div>
</template>

<style lang="less" scoped>
h4 {
  text-align: center;
}
.CardGlass {
  margin-top: var(--gap-md);
}
.List_item {
  padding: var(--gap-md);
  border-bottom: 2rem solid var(--C-T1);
}
</style>
